<script setup lang="ts">
import { useTheme } from "@/composables/useTheme";
import { JumpPath, uploadImgs, Tips } from "@/utils";
import { bannaSet, bannerDetails } from "@/api/banner";
import { getBaseUrl, getUploadUrl } from "@/utils/env";
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
import { hidePageNavInWechatBrowser } from "@/composables/useHiddenNavbar";
import { pathToBase64 } from "@/plugin/image-tools/index.js";
import hideWechatMenu from "@/composables/hideWechatMenu";
onShow(() => {
  hideWechatMenu();
});
onReady(() => {
  hidePageNavInWechatBrowser();
});
const HTTP_REQUEST_URL = getBaseUrl();
const HTTP_UPLOAD_URL = getUploadUrl();
const { colorStyle } = useTheme();
let logoImg = ref("");
let curl_http = ref("");
let bannerId = ref("");
onLoad((option) => {
  if (option.id) {
    bannerId.value = option.id;
    getBannerDetail();
  }
});
function getBannerDetail() {
  bannerDetails({ id: bannerId.value }).then((res) => {
    logoImg.value = res.data.images;
    curl_http.value = res.data.curl_http;
  });
}
function submitHandler() {
  if (!logoImg.value) return Tips({ title: "请上传轮播图" });
  const params = {
    id: bannerId.value,
    images: logoImg.value,
    curl_http: curl_http.value,
  };
  bannaSet(params).then((res) => {
    Tips(
      { title: res.info },
      {
        tab: 3,
      }
    );
  });
}
let customCropperRef = ref("");
function chooseCustomImage() {
  customCropperRef.value.chooseImage(0, {
    areaWidth: "650rpx",
    areaHeight: "230rpx",
    exportWidth: "650rpx",
    exportHeight: "230rpx",
    canRotate: false,
    quality: 1,
  });
}
async function onCustomConfirm(rsp) {
  let uploadData: string | File = rsp.path;

  // 如果是 Blob URL，先转换为 base64
  if (rsp.path.startsWith("blob:")) {
    const base64Data = await pathToBase64(rsp.path);
    uploadData = base64Data;
  }
  uploadImgs(
    HTTP_UPLOAD_URL,
    uploadData,
    (res) => {
      uni.hideLoading();
      logoImg.value = res.data.url;
    },
    (err) => {
      uni.hideLoading();
    }
  );
}
</script>
<template>
  <view class="wrap" :style="colorStyle">
    <view class="card_box">
      <view class="swiper_box flex_c" @click="chooseCustomImage">
        <view class="image_box" v-if="logoImg">
          <image :src="logoImg" mode="widthFix" />
        </view>
        <view class="info_box flex_fc" v-else>
          <text class="iconfont icon-xiangji"></text>
          <text class="logo_text">推荐尺寸750·230像素</text>
        </view>
      </view>
    </view>
    <view class="card_box item_box">
      <view class="title">跳转链接</view>
      <view class="textarea_box">
        <textarea
          class="textarea_class"
          placeholder-class="placeholder_class"
          placeholder="请输入跳转链接"
          v-model="curl_http"
        ></textarea>
      </view>
    </view>
    <view class="theme_btn" @click="submitHandler">
      <text v-if="bannerId">确认修改</text>
      <text v-else>确认添加</text>
    </view>
    <up-cropper ref="customCropperRef" @confirm="onCustomConfirm" />
  </view>
</template>

<style scoped lang="scss">
.wrap {
  .card_box {
    background: #fff;
    padding: 20rpx 0;
    margin-bottom: 2rpx;
  }
  .item_box {
    padding: 20rpx 30rpx;
    font-size: 26rpx;
    margin-bottom: 50rpx;
    .title {
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      color: rgba(125, 136, 140, 1);
    }
    .textarea_box {
      .textarea_class {
        min-height: 100rpx;
        width: 100%;
      }
      textarea {
        font-size: 26rpx;
      }
      //   .placeholder_class {
      //     color: #ccc;
      //     font-size: 26rpx;
      //   }
    }
  }
  .swiper_box {
    width: 650rpx;
    height: 230rpx;
    margin: 0 auto;
    border-radius: 12rpx;
    overflow: hidden;
    background: rgba(248, 248, 248, 1);
    font-size: 26rpx;
    color: rgba(214, 221, 222, 1);
    .info_box {
      padding: 67rpx 0 25rpx;
    }
    .image_box {
      width: 100%;
      height: 100%;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .iconfont {
      font-size: 80rpx;
    }

    .logo_text {
      margin-top: 20rpx;
    }
  }
}
</style>
